<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>组件插槽</title>
	<script src="/js/vue.js"></script>
</head>

<body>
	<!-- 一、组件插槽 -->
	<!-- 1.基本使用 <slot></slot> -->
	<!-- 2.可以有默认值 <slot><button type="button">say</button></slot>-->
	<!-- 3. 可以同时放入多个内容 -->

	<!-- 二、具名插槽 -->
	<!-- 插槽有自己的名字 -->

	<div id="app">
		<!-- 第一个是div标签，第二个按钮，第三个改成i标签，第四个要求p标签 -->
		<!-- <cpn>
			<div>hello</div>
		</cpn>
		<cpn><button type="button">button</button></cpn>
		<cpn><i>123</i></cpn>
		<cpn>
			<p>shane</p>
		</cpn>
		<cpn></cpn>
		<cpn>
			<h3>111</h3>
			<i>hahah</i>
			<br>
			<button type="button">button</button>
		</cpn> -->
		<cpn><button slot="right">button</button></cpn>
	</div>

	<template id="cpn">
		<div>
			<!-- 前两个元素一样，第三个元素 -->
			<!-- 第一个是div标签，第二个按钮，第三个改成i标签，第四个要求p标签 -->
			<h2>组件标题</h2>
			<p>组件内容</p>
			<!-- 模板中可以设置默认值 -->
			<slot><button type="button">say</button></slot>
			
			<slot name="left"><i>左</i></slot>
			<slot name="center"><i>中</i></slot>
			<slot name="right"><i>右</i></slot>



		</div>
	</template>

	<br>
	<script>
		const cpn = {
			template: '#cpn',
		}

		let app = new Vue({
			el: "#app",
			data: {
				msg: 'hello world',
			},
			components: {
				cpn
			}
		})
	</script>
</body>

</html>